Using HTML with CSS

In this tutorial you will learn how to apply style rules to HTML elements.

CSS provides styles to HTML elements on the page. Inline styling involves usage of the style attribute in tags, and is highly discouraged. Internal stylesheets use the <style>tag and are used to declare rules for directed portions ofthe page. External stylesheets may be used through a <link> tag which takes an external file of CSS and applies therules to the document.

Inline styles — Using the style attribute in the HTML start tag.
Internal styles — Using the <style> element in the head section of the document.
External style sheet — Using the <link> element, pointing to an external CSS files.

Note: The inline styles have the highest priority, and the external style sheets have the lowest. It means if you specify styles for your paragraphs in both embedded and external style sheets, the conflicting style rules in the embedded style sheet would override the external style sheet.

Inline CSS - The style Attribute:

You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. The style attribute includes a series of CSS property and value pairs. Each property: value pair is separated by a semicolon (;)

Here is the generic syntax: Try It

<h1 style ="color: blue;">This is inline CSS</h2>
<h1 style ="color: blue;background-color:yellow; ">This is inline CSS</h1>

Using the inline styles are generally considered as a bad practice. Because style rules are embedded directly inside the html tag, it causes the presentation to become mixed with the content of the document, which makes updating or maintaining a website very difficult.

Note: It's become impossible to style pseudo-elements and pseudo-classes with inline styles. You should, therefore, avoid the use of style attributes in your markup. Using external style sheet is the preferred way to add style information to an HTML document.

Internal CSS - The <style> Element:

You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the <head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in the document.

Here is the generic syntax: Try It

<head>
<style>
h1{
background-color: blue;
color: yellow;
}
</style>
</head>

External CSS - The Element:

The <link> element can be used to include an external stylesheet file in your HTML document. An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.

Here is the generic syntax: Try It

<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>